<?php
session_start();
include_once "checkLogin.php";
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/menu.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/nav.js" type="text/javascript"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/TweenMax.min.js"></script>
    <link href="css/word.css" rel="stylesheet" type="text/css"/>
    <title>图书续借</title>
    <style>

        #content #imgs {
            width: 5%;
            position: relative;
            left: 3%;
        }

        #content #dangan {
            position: relative;
            left: 4%;
            bottom: -8px;
            box-shadow: -4px -4px 10px #9db7c8;
            font-size: 22px;
            font-weight: 100;
        }

        #content thead tr {
            background-color: #E2F5F7;
        }

        #content thead th {
            color: black;
            font-weight: bold;
            border-right: 2px solid white;
            text-align: center;
        }

        table td {
            color: black;
        }

        tbody td a {
            font-size: 1.1em;
            color: skyblue;
            cursor: pointer;
        }

        #content {
            width: 95%;
            border: 1px solid #dddddd;
            margin: 10px auto;
        }

        .layui-container {
            width: 95%;
            border: 2px solid #d2e5e7;
            margin-bottom: 5px;
        }
        table tr th:last-child {
            width: 50px;
        }
        .layui-row p {
            margin: 15px 30px
        }

        .input {
            margin: 15px 30px
        }

        .md4 {
            height: 176px;
            border-right: 2px solid #dddddd;
        }

        .md4 .layui-row {
            position: relative;
            top: 20px;
        }
    </style>
</head>
<body>
<canvas id="Mycanvas" style="position: absolute;left: 0%;width: 100%;height: 99%"></canvas>
<div id="main">
    <header>
        <div id="header1">
            <div id="a"></div>
            <img src="img/logo1.png">
            <h2 class="letter-wrap"  data-stagger="-0.015">清华大学图书馆管理系统</h2>
            <span>当前登录用户：<?php echo $_SESSION['admin']?></span>
        </div>
    </header>
    <div class="navmain">
        <div id="time"><span></span></div>
        <ul id="nav_all">
            <li><a href="index.php">首页</a></li>
            <?php
            include_once "conn.php";
            $main = new main();
            $info = $main->checkAdmin($_SESSION['admin']);
            if ($info['system']){
                ?>
                <li><a href="#">系统设置</a>
                    <ul style="display: none;">
                        <li><a href="library.php">图书馆信息</a></li>
                        <li><a href="admin.php">管理员设置</a></li>
                        <li><a href="#">参数设置</a></li>
                        <li><a href="shujia.php">书架设置</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['readerset']){
                ?>
                <li><a href="#">读者管理</a>
                    <ul style="display: none;">
                        <li><a href="readertype.php">读者类型管理</a></li>
                        <li><a href="user.php">读者档案管理</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['bookset']){
                ?>
                <li><a href="tushudangan.php">图书档案管理</a></li>
                <?php
            }
            if ($info['book']){
                ?>
                <li><a>图书借还</a>
                    <ul style="display: none;">
                        <li><a href="bookjieyue.php">图书借阅</a></li>
                        <li><a href="bookxujie.php">图书续借</a></li>
                        <li><a href="bookback.php">图书归还</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['syschaxun']){
                ?>
                <li> <a>系统查询</a>
                    <ul style="display: none;">
                        <li><a href="tushudanganchaxun.php">图书档案查询</a></li>
                        <li><a href="jieyuechaxun.php">图书借阅查询</a></li>
                        <li><a href="jieyue.php">借阅到期提醒</a></li>
                    </ul>
                </li>
                <?php
            }
            ?>
            <li>
                <a href="pw.php">更改口令</a>
            </li>
            <li><a href="zhuxiao.php">注销</a> </li>
        </ul>
    </div>
    <div id="b"></div>
    <img id="null" src="img/null.png" style="width: 12%;position: absolute;top: 55%;left:43%;display: none ">
    <img id="load" src="img/loding.gif" style="position: absolute;top: 45%;left:35%; display: none" >
    <div id="c">
        <div id="now">当前位置：图书借还 > 图书续借  >>></div>
        <div id="content">
            <img id="imgs" src="img/book.png">
            <span id="dangan">图书续借</span>
            <hr class="layui-bg-green">
            <div class="layui-container" style="height: 178px">
                <div class="layui-row">
                    <div class="layui-col-md4 md4">
                        <div class="layui-row">
                            <img id="yanzheng" src="img/yanzheng.gif" style="width: 50%">
                        </div>
                        <div class="layui-row">
                            <p>读者条形码:</p>
                        </div>
                        <div class="layui-row input">
                            <div class="layui-form">
                                <div class="layui-input-inline">
                                    <input type="text" name="number" required lay-verify="required"
                                           placeholder="请输入读者条形码"
                                           autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md8">
                        <div class="layui-row" style="margin-top: 8px;margin-left: -25px">
                            <div class="layui-col-md6">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">姓名:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" required lay-verify="required"
                                                   autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">性别:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="sex" required lay-verify="required"
                                                   autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 8px;margin-left: -25px">
                            <div class="layui-col-md6">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">证件类型:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="type" required lay-verify="required"
                                                   autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">证件号码:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="typenum" required lay-verify="required"
                                                   autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 8px;margin-left: -25px">
                            <div class="layui-col-md6">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">读者类型:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="readertype" required lay-verify="required"
                                                   autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">可借数量:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="jienum" required lay-verify="required"
                                                   autocomplete="off" class="layui-input" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="layui-table" lay-even lay-skin="nob" style="margin-top: 0">
                <colgroup>
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图书名称</th>
                    <th>借阅时间</th>
                    <th>应还时间</th>
                    <th>出版社</th>
                    <th>书架</th>
                    <th>定价(元)</th>
                    <th>完成续借</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div id="demo7" style="position: absolute"></div>
        </div>
    </div>
    <footer>
        <hr id="one">
        <hr id="two">
        CopyRight © 2019 www.cdp.cn.com 清华大学图书馆
    </footer>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/logo.js"></script>
<script src="js/bg.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','laypage'], function () {
        var layer = layui.layer
            , form = layui.form
            ,laypage = layui.laypage;
        form.on('submit(formDemo)', function (data) {
            barcode=data.field.number;
            let a = function () {
                console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    type: "POST",
                    url: "getbookback.php",
                    data: {
                        barcode: data.field.number
                    },
                    dataType: 'JSON',
                    cache: false, //不缓存此页面
                    beforeSend: function () {
                        $("#load").css('display', 'block');
                    },
                    success: function (data) {
                        if (data) {
                            console.log(data);
                            userid = data[0];
                            number = data.number - data.numbers;
                            $(".layui-col-md8 input").val('');
                            $("#load").css('display', 'none');
                            console.log(data);
                            $("input[name='name']").val(data.name);
                            $("input[name='sex']").val(data.sex);
                            $("input[name='type']").val(data.idcard);
                            $("input[name='typenum']").val(data.zhenjian);
                            $("input[name='readertype']").val(data.typename);
                            $("input[name='jienum']").val(number);
                        }
                    else
                        {
                            $(".layui-col-md8 input").val('暂无数据');
                        }
                    }
                });
                flsh = function () {
                    $.ajax({
                        type: "POST",
                        url: "getuserbookback.php",
                        data: {
                            barcode: data.field.number,
                            tiaojian: 0
                        },
                         dataType: 'JSON',
                         cache: false, //不缓存此页面
                         success: function (data) {
                            zs = data.length;
                             laypage.render({
                                 elem: 'demo7'
                                 ,limit:4
                                 ,count: zs
                                 ,jump: function(obj){
                                     console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                     console.log(obj.limit); //得到每页显示的条数
                                     $.ajax({
                                         type: "POST",
                                         url: "getuserbookback.php",
                                         data: {
                                             one:obj.curr,
                                             two:obj.limit,
                                             barcode: barcode,
                                             tiaojian: 1
                                         },
                                         dataType: 'JSON',
                                         cache: false, //不缓存此页面
                                         beforeSend: function () {
                                             $("#load").css('display', 'block');
                                         },
                                         success: function (data) {
                                             $("#load").css('display', 'none');
                                             console.log(data);
                                             if (data.length === 0) {
                                                 $("#null").css('display', 'block');
                                                 $("#demo7").css('display', 'none');
                                             } else {
                                                 $("#null").css('display', 'none');
                                                 $("#demo7").css('display', 'block');
                                             }
                                             document.querySelector("tbody").innerHTML = '';
                                             for (let i = 0; i < data.length; i++) {
                                                 let s =
                                                     `<tr>
                                    <td>${data[i]['bookname']}</td>
                                    <td>${formatDateTime(data[i]['jietime']*1000)}</td>
                                    <td>${formatDateTime(data[i]['backtime']*1000)}</td>
                                    <td>${data[i]['chuban']}</td>
                                    <td>${data[i]['shujia']}</td>
                                    <td>${data[i]['price']}</td>
                                    <td><a class="back" rel="${data[i]['ID']}" href="#?id=${data[i]['ID']}"><button class="layui-btn">续借</button></a></td>
                            </tr>`;
                                                 document.querySelector("tbody").innerHTML += s;
                                             }
                                             function formatDateTime(inputTime) {
                                                 var date = new Date(inputTime);
                                                 var y = date.getFullYear();
                                                 var m = date.getMonth() + 1;
                                                 m = m < 10 ? ('0' + m) : m;
                                                 var d = date.getDate();
                                                 d = d < 10 ? ('0' + d) : d;
                                                 return y + '-' + m + '-' + d;
                                             }
                                             $(".back").click(function () {
                                                 let name = $(this);
                                                 let id = name.attr("rel"); //对应id
                                                 if(window.confirm("确认续借？"))
                                                 {
                                                     console.log(userid);
                                                     console.log(id);
                                                     $.ajax({
                                                         type: "POST",
                                                         url: "xujiebook.php",
                                                         data: {
                                                             id:id
                                                         },
                                                         dataType:'JSON',
                                                         cache: false, //不缓存此页面
                                                         success: function (data) {
                                                             if (data.error===1){
                                                                 layer.msg('续借成功!');
                                                                 setTimeout(function () {
                                                                     flsh();
                                                                 },500);
                                                             }else{
                                                                 alert('续借失败,请重试!')
                                                             }
                                                         }
                                                     })
                                                 }
                                             })
                                         }
                                     });
                                 }
                             });
                         }
                     });
                 };
                 flsh();
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            };

            a();
        });
    });
</script>
</html>


